<template>

    <el-form :model="form" label-width="150px" :rules="rules" ref="formRef">
        <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
            <!-- <el-input v-model="form.gender" /> -->
            <el-radio-group v-model="form.gender" size="default">
                <el-radio-button v-for="gender in genders" :label="gender.caption" :value="gender.code" />
            </el-radio-group>
        </el-form-item>

        <el-form-item label="出生日期" prop="birthday"> <el-date-picker v-model="form.birthday" value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"></el-date-picker>

        </el-form-item>
        <el-form-item label="年龄">
            <el-input v-model="form.age" />
        </el-form-item>
        <el-form-item label="看诊日期" prop="visitTime">
            <el-date-picker v-model="form.visitTime" value-format="YYYY-MM-DD" format="YYYY-MM-DD"></el-date-picker>
        </el-form-item>
        <el-form-item label="挂号科室" prop="deptId">
            <!-- <el-input v-model="form.deptId" /> -->
            <el-select v-model="form.deptId" placeholder="请选择" @change="queryDoctor">
                <el-option v-for="dept in deptList" :key="dept.deptId" :label="dept.deptName" :value="dept.deptId"
                    @change="queryDoctor" />
            </el-select>
        </el-form-item>
        <el-form-item label="挂号级别" prop="registLevel">
            <!-- <el-input v-model="form.registLevel" /> -->

            <el-select v-model="form.registLevel" placeholder="请选择" @change="selectRegistLevel">
                <el-option v-for="level in levelList" :key="level.levelId" :label="level.caption"
                    :value="level.levelId" />
            </el-select>
        </el-form-item>
        <el-form-item label="看诊医生" prop="userid">
            <!-- <el-input v-model="form.userid" /> -->
            <el-select v-model="form.userid" placeholder="请选择">
                <el-option v-for="doctor in userList" :key="doctor.userid" :label="doctor.nickname"
                    :value="doctor.userid" />
            </el-select>
        </el-form-item>
        <el-form-item label="是否需要病历本" prop="book">
            <!-- <el-input v-model="form.book" /> -->

            <!-- <div v-for="constItem in yesOrNos">{{ constItem }}</div> -->
            <el-radio-group v-model="form.book" size="default" @change="handleBookChange">
                <el-radio-button v-for="constItem in yesOrNos" :label="constItem.caption" :value="constItem.code" />
            </el-radio-group>

        </el-form-item>
        <el-form-item label="费用">
            <el-input v-model="form.fee" readonly />
        </el-form-item>


    </el-form>
    <el-row>
        <el-col :spa="24">
            <el-button type="primary" @click="regist">保存</el-button>

        </el-col>

    </el-row>




</template>

<script setup lang="ts" name="RegisterForm">
import { onMounted, reactive, ref } from 'vue'

import { service } from '@/utils/request'
import { saveOrUpdate, list } from '@/utils/crud'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'

import { getConstants } from "@/utils/constantsUtils";


const genders = getConstants('Gender');
const yesOrNos = getConstants('YesOrNO');


//表单对象，用于校验规则
const formRef = ref(null);

const rules = reactive({
    name: [
        { required: true, message: '患者姓名必填', trigger: 'blur' },
        { min: 2, max: 20, message: '长度为3-5个字符', trigger: 'blur' },
    ],
    gender: [{ required: true, message: '必填', trigger: 'blur' }],
    age: [{ required: true, message: '必填', trigger: 'blur' }],
    birthday: [{ required: true, message: '必填', trigger: 'blur' }],
    visitTime: [{ required: true, message: '必填', trigger: 'blur' }],
    deptId: [{ required: true, message: '必填', trigger: 'blur' }],
    registLevel: [{ required: true, message: '必填', trigger: 'blur' }],
    userid: [{ required: true, message: '必填', trigger: 'blur' }],
    book: [{ required: true, message: '必填', trigger: 'blur' }],

})



const { close } = defineProps<{
    close: () => void
}
>()


interface Register {
    registId: number;
    name: string;
    gender: string;
    age: string;
    birthday: string;
    visitTime: string;
    deptId: string;
    registLevel: string;
    userid: string;
    book: string;
    fee: number;
}

interface User {
    userid: string;
    nickname: string
}

interface RegistLevel { levelId: string; caption: string; fee: number }

const deptList = ref<{ deptId: string; deptName: string }[]>([]);
const levelList = ref<RegistLevel[]>([]);
const userList = ref<User[]>([]);



const form = reactive<Register>({
    registId: 0,
    name: '',
    gender: '',
    age: '',
    birthday: '',
    visitTime: '',
    deptId: '',
    userid: '',
    registLevel: '',
    book: '',
    fee: 0
})


/**
 * 保存挂号信息
 */
function regist() {
    if (formRef.value) {
        formRef.value.validate((valid: boolean) => {
            if (valid) {
                const url = '/guahao/guahao';
                saveOrUpdate(url, form).then(success => {
                    if (success) {
                        ElMessage({
                            message: '挂号成功',
                            type: 'success'
                        })
                        close();
                    } else {
                        ElMessage({
                            message: '挂号失败',
                            type: 'error'
                        })
                    }

                })
            } else {
                ElNotification({
                    title: "Error",
                    message: "请检查表单项目",
                    type: "error",
                });
            }
        })
    }
}


function initPage() {
    service.get('/guahao/initGuahaoPage',).then(resp => {
        deptList.value = resp.deptList
        levelList.value = resp.levelList
    });
}


function queryDoctor() {

    if (form.deptId && form.registLevel) {
        list<User>('/guahao/getDoctor', {
            deptId: form.deptId,
            registLevel: form.registLevel,
        }).then(users => {
            userList.value = users;
        });
    }
}



function handleBookChange() {
    if (form.registLevel) {
        calcFee(form.registLevel);
    }

}


function calcFee(id: string) {
    levelList.value.forEach((level: RegistLevel) => {
        // console.log(id, level, (level.levelId == id), level.fee);

        if (level.levelId == id) {
            form.fee = parseFloat(<string>level.fee) + (form.book == 'Y' ? 1 : 0);
        }
    });
}

function selectRegistLevel(id: any) {

    calcFee(id);



    queryDoctor();


}

//页面挂在的时候 调用
onMounted(() => {
    initPage()
})


</script>